<template>
  <div id="App">
    <plan-view
      @dblclick="dbAddclick"
      @rigthRemoveClick="rigthRemoveClick"
      :data="data"
      :configuration="configuration"
    >
      <template v-slot:content="content">
        <div>
          {{ content?.item?.content?.huai }}
        </div>
      </template>
    </plan-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 数据类型
type TPlanView = {
  content?: any;
  x: number | string;
  y: number | string;
};
const inputValue = ref("");
// 需要的配置
const configuration = reactive({
  width: 100,
  height: 80,
  contentShow: true,
  contentBackground: "red",
  titleBackground: "skyblue",
  imgUrl:
    "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.to8to.com%2Fcase%2F1403%2F29%2F20140329_2056e66c8e297384e6afkc24hj2xd55g.jpg&refer=http%3A%2F%2Fpic.to8to.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670290722&t=0fb4f1ef4e2d1ca446019f3fb1f48c2c",
});
const data = reactive<TPlanView[]>([{ content: { huai: 11 }, x: 0.3, y: 0.4 }]);
// 双击添加标点事件
const dbAddclick = (item: any) => {
  console.log(item);
  let { x, y } = item.value;
  let addContent: TPlanView = {
    x,
    y,
    content: { huai: inputValue.value },
  };
  data.push(addContent);
  inputValue.value = "";
};
// 右击删除事件
const rigthRemoveClick = (item: TPlanView, index: number) => {
  alert(123);
  data.splice(index, 1);
};
</script>
<style>
html,
body,
#App {
  margin: 0 !important;
  padding: 0;
  width: 1000px;
  height: 800px;
  overflow: hidden;
  background: red;
}
</style>
